<template>
  <view class="body">
    <view class="ai_report">
      <view class="content_list">
        <view v-for="(item, index) of reportList" :key="index" class="content_item">
          <view class="content_item_title" @tap="expand(index)">
            <view class="title_text">
              <image class="img_warning" src="@/static/image/raozg/warning.png" />
              <text class="text_red">{{ item.summary }}</text>
            </view>
            <image v-if="!item.isExpand" class="img_detail" src="@/static/image/raozg/expand.png" />
            <image v-else class="img_detail" src="@/static/image/raozg/retract.png" />
          </view>
          <view :class="['content_expand', item.isExpand ? 'expand_height' : '']">
            <!-- <view class="error_result">
                            <image class="img_error_result" src="@/static/image/raozg/error_result.png" />
                            <view class="error_item">
                                <view class="name">体重指数</view>
                                <view class="result">
                                    <text>24.9 kg/m2</text>
                                    <image class="img_error" src="@/static/image/raozg/error_high.png" />
                                </view>
                            </view>
                            <view class="normal">(18.5~23.9)</view>
                        </view> -->
            <view class="ai_interpret">
              <image class="img_error" src="@/static/image/raozg/title.png" />
              <view class="title">AI报告解读</view>
            </view>
            <!-- <view class="error_info">
                            <view class="dot"></view>
                            <view class="text">体重指数偏高</view>
                        </view> -->
            <view class="suggest">
              <view class="title">医学解释</view>
              <view class="content">{{ answerWs.result }}</view>
            </view>
            <view class="suggest">
              <view class="title">指导建议</view>
              <view class="content">{{ item.suggest }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const props = defineProps({
  conclusion: {
    type: Array
  }
})

const reportList = ref([])

const answerWs = reactive({
  ws: null,
  isConnect: false,
  lockReconnect: false,
  result: '',
  finish: true
})
const socketTask = ref(null)

onMounted(() => {
  reportList.value = props.conclusion
  reportList.value.forEach((item) => {
    item.isExpand = false
  })
  initAskWebSocket()
})

const expand = (index) => {
  answerWs.result = ''
  reportList.value[index].isExpand = !reportList.value[index].isExpand
  reportList.value.forEach((item, idx) => {
    if (idx != index) {
      item.isExpand = false
    }
  })
  const zndzParam = {
    type: 'pe',
    query: '',
    history: [],
    sex: '',
    age: '',
    content: [{ peResult: reportList.value[index].summary }]
  }
  if (reportList.value[index].isExpand) {
    uni.showLoading({
      title: '正在解读中...',
      mask: true
    })
    answerWs.ws.send({
      data: JSON.stringify(zndzParam)
    })
  }
}

const initAskWebSocket = () => {
  const url = 'wss://ainengli.hzjrsw.com/baogao/ws/chat/analyze/'
  if (uni.getSystemInfoSync().uniPlatform == 'mp-weixin') {
    answerWs.ws = uni.connectSocket({
      url: url,
      complete: () => {}
    })
    answerWs.ws.onOpen((res) => {
      answerWs.isConnect = true
    })
    answerWs.ws.onMessage((res) => {
      let obj = JSON.parse(res.data)
      answerWs.result += obj.answer
      if (obj.final == 1) {
        uni.hideLoading()
      }
    })
  }
  if (uni.getSystemInfoSync().uniPlatform == 'mp-alipay') {
    socketTask.value = my.connectSocket({
      url: url, // 此 url 仅为示例，开发者可替换自己的 URL
      multiple: true, // multiple 为 true 则会返回 socketTask
      success: (res) => {
        console.log('connectSocket1 成功' + JSON.stringify(res))
      },
      fail: (res) => {
        console.log('connectSocket1 失败' + JSON.stringify(res))
      }
    })
    socketTask.value.onOpen(function (res) {
      console.log('websocket链接成功')
    })
    socketTask.value.onClose(function (res) {
      console.log('socketTask1.onClose' + JSON.stringify(res))
    })
    socketTask.value.onError(function (res) {
      console.log('socketTask1.onError' + JSON.stringify(res))
    })
    socketTask.value.onMessage(function (res) {
      let obj = JSON.parse(res.message)
    })
  }
}
</script>

<style lang="scss" scoped>
.body {
  // ai解读报告部分
  .ai_report {
    padding: 0 32rpx;
    background: #fff;
    .content_list {
      height: calc(100vh - 322rpx);
      overflow: auto;
      padding-bottom: 32rpx;
      .content_item {
        .content_item_title {
          min-height: 108rpx;
          padding: 33rpx 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #e5e6eb;
          .title_text {
            display: flex;
            align-items: center;
            .text_red {
              display: inline-block;
              width: 550rpx;
              font-weight: 500;
              font-size: 30rpx;
              color: #ff503d;
            }
            .img_warning {
              width: 32rpx;
              height: 32rpx;
              margin-right: 16rpx;
            }
          }
          .img_detail {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .content_expand {
          max-height: 0;
          overflow: hidden;
          transition: all 0.5s;
          &.expand_height {
            overflow: auto;
            max-height: 800rpx;
            transition: all 0.5s;
            border-bottom: 1rpx solid #e5e6eb;
          }
          .error_result {
            width: 100%;
            margin-top: 32rpx;
            background: rgba(255, 80, 61, 0.1);
            border-radius: 16rpx;
            border: 1rpx solid #ff503d;
            position: relative;
            overflow: hidden;
            .img_error_result {
              width: 182rpx;
              height: 50rpx;
              position: absolute;
              top: 0;
              left: 0;
            }
            .error_item {
              display: flex;
              justify-content: space-between;
              margin: 74rpx 16rpx 8rpx;
              .name {
                font-weight: 400;
                font-size: 30rpx;
                color: #222222;
              }
              .result {
                font-weight: 400;
                font-size: 30rpx;
                color: #ff503d;
                .img_error {
                  width: 24rpx;
                  height: 24rpx;
                  margin-left: 8rpx;
                }
              }
            }
            .normal {
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              margin-bottom: 24rpx;
              margin-right: 16rpx;
              float: right;
            }
          }
          .ai_interpret {
            margin-top: 32rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .img_error {
              width: 40rpx;
              height: 28rpx;
            }
            .title {
              font-weight: 500;
              font-size: 32rpx;
              color: #222222;
              margin-left: 16rpx;
            }
          }
          .error_info {
            margin-top: 32rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .dot {
              width: 12rpx;
              height: 12rpx;
              border-radius: 50%;
              background: #ff503d;
            }
            .text {
              font-weight: 500;
              font-size: 30rpx;
              color: #ff503d;
              margin-left: 16rpx;
            }
          }
          .suggest {
            margin-top: 24rpx;
            &:last-child {
              margin-bottom: 24rpx;
            }
            .title {
              height: 74rpx;
              line-height: 74rpx;
              padding-left: 16rpx;
              font-weight: 500;
              font-size: 30rpx;
              color: #00d1b6;
              background: rgba(0, 209, 182, 0.1);
            }
            .content {
              margin-top: 16rpx;
              padding: 16rpx;
              background: #fafafa;
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
              line-height: 50rpx;
              text-align: justify;
            }
          }
        }
      }
    }
  }
}
</style>
